---
import PageLayout from "@/layouts/Base";
import { Image } from "@astrojs/image/components";
import aboutImg from "../assets/about-astro.png";

const meta = {
	title: "About",
	description: "I'm a starter theme for Astro",
};
---

<PageLayout meta={meta}>
	<div class="space-y-6">
		<h1 class="title">About</h1>
		<p>
			Hi, I’m a starter Astro. I’m particularly great for getting you started
			with your own blogging website.
		</p>
		<div class="flex justify-center">
			<Image src={aboutImg} alt="A cartoon cactus looking at 'Astro.build' logo"
			/>
		</div>
		<p>Here are my some of my awesome built in features:</p>
		<ul class="list-disc list-inside">
			<li>I'm ultra fast as I'm a static site</li>
			<li>I'm fully responsive</li>
			<li>I come with a light and dark mode</li>
			<li>I'm easy to customise and add additional content</li>
			<li>I have Tailwind CSS styling</li>
			<li>Shiki code syntax highlighting</li>
		</ul>
		<p>
			Clone or fork my
			<a
				class="inline-block cactus-link"
				href="https://github.com/chrismwilliams/astro-cactus"
				target="_blank"
				rel="noopener noreferrer"
				aria-label="github repository"
			>
				repo
			</a> if you like me!
		</p>
	</div>
</PageLayout>
